<template>
  <transition appear name="side_anime">
    <div id="patientList">
      <div class="cureStatus">
        <el-row>
          <el-button type="primary" @click="change(0)" :class="{ newStyle:0===number}">
            未就诊</el-button>
          <el-button type="success" v-show="total2!=0" @click="change(1)" :class="{ newStyle:1===number}">
            待开药</el-button>
      </el-row>
      </div>

      <div>
        <transition appear name="side0_anime">
          <div v-show="0===number">
            <h1>我未就诊的病人</h1>

            <!-- 未就诊病人列表 -->
            <el-table
              ref="multipleTable"
              :data="list1"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <!-- <el-table-column
                type="selection"
                width="55">
              </el-table-column> -->

              <el-table-column
                label="日期"
                width="180">
                <template #default="scope">{{ scope.row.time }}</template>
              </el-table-column>

              <el-table-column
                prop="name"
                label="姓名"
                width="120">
              </el-table-column>

              <el-table-column
                prop="sex"
                label="性别"
                width="120">
              </el-table-column>
          
              <el-table-column
                prop="age"
                label="年龄"
                width="120">
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-view"
                    type="success"
                    @click="checkPatient(scope.$index, scope.row)">查看病人信息</el-button>
                  <!-- <el-button
                    size="mini"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleAdd(scope.$index, scope.row)">添加诊断信息</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              v-model:currentPage="currentPage1"  
              :page-size="8"
              layout="total, prev, pager, next"
              :total=total>
            </el-pagination>

          </div>
        </transition>

        <transition appear name="side1_anime">
          <div v-show="1===number">
            <h1>我待开药的病人</h1>

            <!-- 待开药的病人列表 -->
            <el-table
              ref="multipleTable"
              :data="list2"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <!-- <el-table-column
                type="selection"
                width="55">
              </el-table-column> -->

              <el-table-column
                label="日期"
                width="180">
                <template #default="scope">{{ scope.row.time }}</template>
              </el-table-column>

              <el-table-column
                prop="name"
                label="姓名"
                width="120">
              </el-table-column>
          
              <el-table-column
                prop="sex"
                label="性别"
                width="120">
              </el-table-column>

              <el-table-column
                prop="age"
                label="年龄"
                width="120">
              </el-table-column>

              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    type="success"
                    @click="prescribe(scope.$index, scope.row)">开药</el-button>
                  <!-- <el-button
                    size="mini"
                    icon="el-icon-plus"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">添加</el-button> -->
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              background
              v-model:currentPage="currentPage2"
              :page-size="8"
              layout="total, prev, pager, next"
              :total=total2>
            </el-pagination>
          </div>
        </transition>
      </div>
      
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import {showWaitForSeeList} from '../../api/api'
import {showWaitForOpenList} from '../../api/api'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  inject:['reload'],
  data() {
      return {
        formInline: {
          name: '',
          date: ''
        },
        isActive:false,
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: 'Today',
          value: new Date(),
        }, {
          text: 'Yesterday',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          },
        }, {
          text: 'A week ago',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          },
        }],
        value1: '',
        value2: '',
        list1:[],
        list2:[],
        multipleSelection: [],
        currentPage1: 1,
        currentPage2: 1,
        total:0,
        total2:0,
        number: 0,
        userDetail:{},
        checkPatientVisible:false,
        userHistoryList:[],
        addDiagnoseVisible:false,
        addDiagnoseForm:{},  //添加诊断信息
        doctorStatus:1
      }
  },

  setup() {
    return {
      textarea: ref(''),
    }
  },

  watch:{
    loginData(val){
      setTimeout(()=>{
        console.log(this)
        this.fullName = val + '-' + this.lastName
      },1000);
    }
	},

  mounted(){  //页面渲染之前执行，调用methods的方法，得到数据
    this.getPatientList(1);
    this.getwaitForOpenList(1);
  },

  methods: {  //定义方法，进行接口调用

      //当每页数据条数发生改变的时候触发
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.getPatientList();
      },
      //当页码发生改变的时候触发
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getPatientList(val);
      },

      onSubmit() {
        console.log('submit!');
      },

      //切换未就诊和待开药按钮
      change(index) {
        this.number = index;
      },

      //获取未就诊病人列表
      getPatientList(page) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        console.log(token)
        let data = {
          'page':page,
          'size':8
        }
        let header = {
          'satoken':token
        }
        showWaitForSeeList(data,header).then(response =>{
          console.log('请求成功',response)
          if (response.ret == '0') {
            this.list1 = response.list
            this.total = response.total
          }else {
            this.$message({
            message:'获取失败',
            type: 'error',
            showClose:true
          })
          }
        })
      },

      //获取待开药病人列表
      getwaitForOpenList(page){
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        console.log(token)
        let data = {
          'page':page,
          'size':8
        }
        let header = {
          'satoken':token
        }
        showWaitForOpenList(data,header).then(response =>{
          console.log('请求成功',response)
          if (response.ret == '0') {
            this.list2 = response.list
            this.total2 = response.total
          }else {
            this.$message({
              message:'获取失败',
              type: 'error',
              showClose:true
            })
          }
        })
      },

      //跳转到病人信息
      checkPatient(index, row) {
        this.$router.push({
          "name":"patientInfo",
          "params":{
            "id":row.id
          }
        })
      },

      //跳转到开药页面
      prescribe(index,row) {
        this.$router.push({
          "name":"drugList",
          "params":{
            "id":row.id
          }
        })
      }

  },

  computed: {
    ...mapState(['medicalStaff/loginData'])
  },
})
</script>

<style scoped>
#patientList .search {
  text-align: left;
}
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutRight 1s;
}

.side0_anime-enter-from,.side0_anime-leave-to{
  opacity: 1;
}

.side0_anime-enter-active{
  animation: slideInLeft 1s;
}

.side0_anime-leave-active{
  animation: slideOutBottom 0.1s;
}
.side1_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side1_anime-enter-active{
  animation: slideInRight 1s;
}

.side1_anime-leave-active{
  animation: slideOutRight 0.1s;
}

.pagination {
  margin-top: 30px;
}

</style>


